<%@page import="com.xnx3.j2ee.Global"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="/wm/common/head.jsp">
	<jsp:param name="title" value="充值" />
</jsp:include>
<style>

body {
	width: 100%;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: flex-start;
	background-color: #fff;
	overflow-y: scroll;
}

#wangmarket_popups>div>div>div>div {
	align-content: center;
	align-items: center;
	justify-content: center;
}

#wangmarket_popups>div {
	margin-top: -100px !important;
}

.czbox {
	margin-bottom: 60px;
	transition: all .3s linear;
	-moz-transition: all .3s linear;
	-webkit-transition: all .3s linear;
	-o-transition: all .3s linear;
}

.czbt {
	font-size: 15px;
	line-height: 30px;
	color: #666;
	float:left;
}

.yuer {
	display: flex;
	align-items: flex-end;
	margin-bottom:40px;
}

.yetxt {
	font-size: 16px;
	line-height: 16px;
	color: #333;
}

.yedan {
	font-size: 16px;
	line-height: 16px;
	color: #333;
}

.yenum {
	font-size: 32px;
	line-height: 40px;
	margin: 0 10px;
	color: #333;
}

.czul {
	margin-left: 90px;
	margin-right: 18%;
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	margin-bottom:15px;
}

.czli {
	width: 15%;
	background-color: #fff;
	display: flex;
	justify-content: center;
	align-content: center;
	align-items: center;
	height: 40px;
	text-decoration: none;
	color: #666;
	border-radius: 5px;
	font-size: 16px;
	line-height: 16px;
	border: 1px solid #ccc;
}
.zffs {
	/* margin-left: 90px;
	margin-right: 18%; */
	display: flex;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	margin-bottom:15px;
}
.tup {
	border:2px solid #D44E4A;
	box-sizing: border-box;
	background-image: url("/js/images/yes.png");
	background-size:15px 15px;
	background-repeat: no-repeat;
    background-position: right bottom;
}
.zffs img {
	width: 110px;

}

.qih {
	border:1px solid #D44E4A;
	background-image: url("/js/images/yes.png");
	background-size:12px 15px;
	background-repeat: no-repeat;
    background-position: right bottom;
}

.qit {
	display: flex;
	padding-bottom: 30px;
	margin: 0;
}

.hin {
	height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.qitanum {
	border: none;
	border-bottom: 1px solid #ccc;
	height: 30px;
	width: 160px;
	background-color: rgba(0, 0, 0, 0);
	font-size: 16px;
	display: flex;
	align-content: center;
	align-items: center;
	box-sizing: border-box;
	margin-left: 15px;
}

.qitanum:focus-visible {
	outline: none;
}

.fsul {
	margin-left: 0px;
	display: flex;
	align-content: center;
	align-items: center;
}

.fsli {
	display: flex;
	flex-wrap: wrap;
	position: relative;
	align-content: center;
	align-items: center;
}

.fsli span {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 150px;
	display: block;
	text-align: center;
	font-size: 12px;
	color: #666;
}

.ljcz {
	margin: 15px auto 60px 90px;
	width: 150px;
	height: 35px;
	display: flex;
	border: 0;
	background-color: #D44E4A;
	color: #fff;
	justify-content: center;
	align-content: center;
	align-items: center;
	font-size: 18px;
	line-height: 20px;
	border-radius: 6px;
}

</style>
<form class="layui-form biaodan" style="padding: 30px;padding-top: 5vh;">
	<input type="hidden" name="id" value="${id}" />
		<div class="yuer">
			<div class="czbt">当前余额：</div>
			<div class="yenum" ><font color="red">${yue/100}</font></div>
			<div class="yedan">元</div>
		</div>
		<div class="czbox"  >
			<div class="czbt"  >充值金额：</div>
			
			<div style="margin-right:100px;">
				<div>
					<a class="czli" href="javascript:void(0);" data-list="11" style="float:right;height:95px;width:13%;">其它金额</a>
				</div>
				<div class="czul"  >
					<a  data-name ="300" class="czli qih" href="javascript:void(0);" data-list="1" >300元</a>
					<a  data-name ="500" class="czli" href="javascript:void(0);" data-list="2" >500元</a>
					<a  data-name ="1000" class="czli" href="javascript:void(0);" data-list="3" >1000元</a>
					<a  data-name ="3000"class="czli" href="javascript:void(0);" data-list="4" >3000元</a>
					<a  data-name ="5000"  class="czli" href="javascript:void(0);" data-list="5" >5000元</a>
				</div>
				<div class="czul"  >
					<a  data-name ="8000" class="czli" href="javascript:void(0);" data-list="6" >8000元</a>
					<a  data-name ="10000" class="czli" href="javascript:void(0);" data-list="7" >10000元</a>
					<a  data-name ="30000" class="czli" href="javascript:void(0);" data-list="8" >30000元</a>
					<a  data-name ="50000"class="czli" href="javascript:void(0);" data-list="9" >50000元</a>
					<a  data-name ="100000"  class="czli" href="javascript:void(0);" data-list="10" >10000元</a>
				</div>
			</div>
			
		</div>
		<div class="czbox qit hin">
			<div class="czbt">其它金额：</div>
			<input type="text" class="qitanum" name="money"  class="layui-input"
			value="${money}" onkeyup="value=value.replace(/[^\d]/g,'').replace(/^0{1,}/g,'')" >
			<div class="explain" style="font-size: 12px;color: gray;margin: 35px -155px">
			单位(元)  
		</div>
		</div>
		<div class="czbox">
			<div class="fsul">
				<div class="fsli">
					<div class="czbt"  style="margin-right: 15px;">充值方式：</div>
					<!-- <input type="radio" checked="checked" name="wx" value="male"/> -->
				</div>
				<div class="zffs">
					<a class="tup"><img  src="/js/images/newpay.png" alt=""></a>
				</div>
			</div>
		</div>
		<button class="ljcz" lay-submit="" lay-filter="demo">立即充值</button>
		<div class="layui-form-item" >
			<p class="text" style="font-size: 15px; color: gray;font-weight:bold;">充值须知</p>
			<p class="text" style="font-size: 14px; color: #666;">1.手续费：</p>
			<p class="text" style="font-size: 14px; color: #999; ">a.<font color=#ff7575>手续费：微信充值会收取0.6%手续费。</font></p>
			<p class="text" style="font-size: 14px; color: #666;">2.余额充值、使用及查看：</p>
			<p class="text" style="font-size: 13px; color: #999;">a.充值操作流程：需先关注斑马回收公众号（<font color=blue>斑马回收recycle</font>）进行代理商绑定，然后进入此页面输入需要充值的金额—点击确认—使用绑定斑马回收公众号的微信进行扫码支付。</p>
			<p class="text" style="font-size: 13px; color: #999;">b.余额使用：余额可在财务管理-分配金额中分配给代理商的下属网格，下属网格在其管理后台可分配给其下骑手用于线上支付。</p>
			<p class="text" style="font-size: 13px; color: #999;">c.余额查看：代理商充值、分配的账户流水可在财务管理-账户流水下查看。</p>
			<p class="text" style="font-size: 14px; color: #666; ">3.注意事项：</p>
			<p class="text" style="font-size: 13px; color: #999;">a.目前仅支持微信支付。</p>
			<p class="text" style="font-size: 13px; color: #999;">b.充值单位（元），最小额度为<font>${zuidiMoneyY}</font>元。</p>
			<p class="text" style="font-size: 13px; color: #999;">c.本系统为充值系统，无法进行提现操作。</p>
		</div>
	</form>
	<style>
		.cztcbox{
			position: fixed;
			width: 700px;
			height: 500px;
			left: calc(50vw - 350px);
			top: 100vh;
			background-color: #fff;
			box-sizing: border-box;
			box-shadow: 3px 4px 20px 0px #d9d9d9;
			border-radius: 8px;
			padding: 20px;
			opacity: 0;
		}
		.cztxtil{
			margin-bottom: 20px;
			font-size: 18px;
			font-family: "Microsoft Yahei";
		}
		.cztcctn{
			display: flex;
			justify-content: space-between;
			align-content: center;
			align-items: center;
		}
		.czcl{
		    flex: 1;
    padding: 40px;
		}
		.ewmp{
			height: 247px;
			width: 247px;
		}
		.ewmp img{
			margin: 0;
		}
		.ewmbox{
			margin-top: 20px;
			background-color: #ff7674;
			display: flex;
			justify-content: center;
			align-content: center;
			padding: 15px 15px 15px 30px;
		}
		.tstil{
			display: flex;
			align-content: space-between;
			flex-wrap: wrap;
			padding-left: 20px;
		}
		.tstil span{
			color: #fff;
		}
		.gba{
			position: absolute;
			right: 20px;
			top: 20px;
		}
	</style>
	<div class="cztcbox">
		<div class="gba" >
		<img style="width: 25px;" src="/js/images/close.png">
		</div>
		<div class="cztxtil">微信支付</div>
		<div class="cztcctn">
			<div class="czcl">
				<div class="ewmp"></div>
				<div class="ewmbox">
					<img alt="" src="/js/images/bag2.png">
					<div class="tstil">
						<span>请使用微信扫一扫</span>
						<span>扫描二维码支付</span>
					</div>
				</div>
			</div>
			<div class="czcr">
				<img alt="" src="/js/images/bag1.png">
			</div>
		</div>
	</div>
<script src="/js/qrcode.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 选择金额的js
var mon = 300 ;

$(".gba").click(
		function(e){
			$(".cztcbox").css("opacity","0");
			$(".cztcbox").css("top","100vh");
})
$('.czli').click(
		function(e){
			/*  console.log($(this).data('list'))
			 console.log($(this).data('name'))  */
			mon = $(this).data('name') ;
			$('.czli').removeClass('qih');
			$(this).addClass('qih');
			if($(this).data('list') == 11){
				//如果是其他金额 设置mon = 0
				mon = 0 ;
				$('.qit').removeClass('hin');
			}else{
				$('.qit').addClass('hin');
			}
		}
	) 
	//自适应弹出层大小
	layui.use(['form', 'layedit', 'laydate'], function(){
	var form = layui.form;
	//监听提交
	form.on('submit(demo)', function(data){
		msg.loading("生成充值二维码中");
		var postDate = wm.getJsonObjectByForm($("form"));	//提交的表单数据
		/* console.log(mon) */
		if(mon > 0){
			postDate.money = mon * 100 < 1 ? 0 : mon * 100;//元转分	
		}else{
			postDate.money = postDate.money*100 < 1 ? 0 : postDate.money*100;//元转分
		}
		console.log(postDate)
			wm.post('/agency/finance/rechargeLog.json', postDate, function (obj) { 
			msg.close();
			if(obj.result == '1'){
				$(".cztcbox").css("opacity","1");
				$(".cztcbox").css("top","10vh");
				var id = 'qrcode'+new Date().getTime();
				$(".ewmp").html('<div id="'+id+'">')
				$(".cztcbox").css("diplay","black");
				//获取充值链接生成二维码
				var qrcode = new QRCode(document.getElementById(id), {
					text: obj.info,//扫描二维码后的内容
					width: 247,//二维码的宽
					height: 247,//二维码的高
					colorDark : "#000000",//二维码线条颜色
					colorLight : "#ffffff",//二维码背景颜色
					correctLevel : QRCode.CorrectLevel.H    //二维码等级
				});
				
			}else if(obj.result == '0'){
				parent.parent.msg.failure(obj.info);
			}else{
				parent.parent.msg.failure(result);
			}
		});
	    
		return false;
	});
});
	
</script>

<jsp:include page="/wm/common/foot.jsp"></jsp:include>
